<script>
import {getOrderList} from "../requests/merchant/order";


var $this;
export default {
  name: 'orderList',
  props: ['order_status'],
  data() {
    return {
      items: []
    }
  },
  methods: {
    initPage() {
      // 订单列表接口
      getOrderList($this.order_status).then(res => {
        let datas = res.data.list
        this.items = datas
      })
    }
    /**
     * 跳转产品详情
     * @param id
     */
    , toDetail(id) {
      console.log(id)
      mpvue.navigateTo({
        url: "/pages/merchant/orderlist/detail/main?orderId="+id,
      })
    }
  },
  created() {
    $this = this;
  },
  mounted() {
    $this.initPage()
  }
}

</script>

<template>
  <view class="orderlist-container">

    <ul v-if="items.length>0">
      <li @click="toDetail(item.id)" v-for="(item,index) in items" :key="index">
        <div class="ms1 clearfix">
          <p>运单号：{{ item.orderDetail.order_no }}</p>
        </div>
        <div class="ms2 clearfix">
          <p>
            <span>出发：</span>
            {{ item.orderDetail.sendAddress.provinceInfo.text }}
            {{ item.orderDetail.sendAddress.cityInfo.text }}
            {{ item.orderDetail.sendAddress.address }}
          </p>

          <p>
            <span>到达：</span>
               {{ item.orderDetail.targetAddress.provinceInfo.text }}
            {{ item.orderDetail.targetAddress.cityInfo.text }}
            {{ item.orderDetail.targetAddress.address }}
          </p>
        </div>
        <div class="ms3 clearfix">
<!--          <p>预计到达时间：<span>2023-08-22 20:18</span></p>-->
        </div>
        <div class="ms4 clearfix">
          <p>积分奖励：<span>{{ item.orderDetail.order_score }}</span></p>
<!--          <button class="more" @click="toDetail(item.id)">查看详情</button>-->
          <button class="cont">联系客服</button>
        </div>
        <div style="clear:both"></div>
      </li>
    </ul>

    <view v-else>

      <view class="empty_container">
        <view class="icon-container">
          <van-icon name="orders-o"/>
        </view>
        <view class="title">暂无订单</view>
      </view>

    </view>
  </view>
</template>

<style>
._ul {
  width: 90%;
  margin: 30px auto;
}

._li {
  background-color: white;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 20px
}

.ms1 {
  border-bottom: 1px solid rgb(158 158 158 / 15%);
  margin-bottom: 10px;
  padding-bottom: 10px;
}

.ms1 ._p {
  font-size: 14px;
  line-height: 15px;
  color: rgb(102 102 102 / 70%);
}

.ms2 {
  margin-bottom: 10px;
}

.ms2 ._p {
  font-size: 15px;
  line-height: 24px;
}

.ms2 ._p ._span {
  color: rgb(102 102 102 / 70%);
}

.ms3 {
  margin-bottom: 20px;
}

.ms3 ._p ._span {
  color: #586ba9;
}

.ms4 ._p {
  float: left;
}

._button {
  float: right;
  font-size: 14px;
  border: 1px solid #586ba9;
  color: #586ba9;
  padding: 0 8px;
  border-radius: 12px;
  line-height: 24px;
  margin-left: 5px;
}

.more {
  color: white;
  background-color: #586ba9;
}

.empty_container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 50vh;
  background-color: #f4f4f4;
}

.icon-container {
  margin-bottom: 30 rpx;
}


.title {
  font-size: 32 rpx;
  color: #333;
  margin-bottom: 20 rpx;
}

</style>
